<template>
  <div class="body">
    <div class="top">
      <h2>
        <i @click="fun()">&lt;</i>
        <p>账单查询</p>
        <b>...</b>
      </h2>
    </div>
    <div class="center">
      <div class="xinxi">
        <p>银行卡号</p>
        <i>{{str.creditCardId}}</i>
      </div>
      <div class="xinxi">
        <p>最低还款金额</p>
        <i>{{str.creditCardBalance}}</i>
      </div>
      <div class="xinxi">
        <p>还需还款金额</p>
        <i>{{str.creditCardAmount}}</i>
      </div>
      <div class="fenxi">
        <p>近三月账单分析</p>
        <i>↓</i>
      </div>
      <div class="fenxi">
        <p>--月账单交易记录</p>
      </div>
      <div class="zd">
        本期暂无账单记录
      </div>
    </div>
  </div>
</template>

<script>
import {card_yes} from "@/apis/user";

export default {
  data(){
    return{
      UserID:localStorage.id,
      str:[]
    }
  },
  methods: {
    fun() {
      this.$router.push("/fenlei");
    },
  },
  created() {
    card_yes({UserId:this.UserID}).then((res)=>{
      console.log(res)
      this.str=res.data.data
    })
  }
};
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 0.6rem;
  background: #3069b0;
  h2 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    color: #fff;
    align-items: center;
    i {
      font-size: 0.2rem;
      margin-left: 0.1rem;
    }
    b {
      font-size: 0.2rem;
      margin-right: 0.15rem;
    }
    p {
      font-size: 0.2rem;
    }
  }
}
.center {
  .xinxi {
    width: 100%;
    height: 0.58rem;
    display: flex;
    padding: 0 0.1rem;
    border-bottom: 0.01rem solid #f2f2f2;
    p {
      width: 40%;
      line-height: 0.58rem;
    }
    i {
      line-height: 0.58rem;
      color: #636363;
    }
  }
  .fenxi {
    width: 100%;
    height: 0.58rem;
    display: flex;
    justify-content: space-between;
    margin: 0.1rem 0;
    align-items: center;
    border-top: 0.01rem solid #ececec;
    border-bottom: 0.01rem solid #ececec;
    p {
      height: 0.2rem;
      padding-left: 0.1rem;
      line-height: 0.2rem;
      color: #579bdc;
      border-left: 0.05rem solid #3069b0;
      border-radius: 0.02rem;
    }
    i {
      width: 0.2rem;
      margin-left: -0.1rem;
    }
  }
  .zd {
    width: 100%;
    height: 2rem;
    font-size: 0.12rem;
    text-align: center;
    line-height: 2rem;
    color: #969696;
  }
}
</style>